import { memo, useEffect, useState } from "react";
import styles from "./allType.module.scss";
import Top from "../../components/top/Top";
import ToHome from "../../components/toHome/ToHome";
import { getFclList } from "../../Api";
import { useNavigate } from "react-router-dom";
let AllType: React.FC = () => {
  let to = useNavigate();
  let [listDate, setLsteDate] = useState<Obj[]>([]);
  let data = async () => {
    let { data } = await getFclList();
    console.log(data);
    setLsteDate((val) => [...val, ...data.data.list]);
  };
  useEffect(() => {
    data();
  }, []);
  return (
    <>
      <ToHome />
      <Top title="全部分类" />
      <ul className={styles.box}>
        {listDate.map((item) => (
          <li key={item.id}>
            <h3>{item.name}</h3>
            <div className={styles.type}>
              {item.tag_list.map((data: Obj) => (
                <div key={data.id} onClick={() => to(`/typebooklist/${data.id}/${data.name}`)}>
                  <img src={data.image} alt="" />
                  <span>{data.name}</span>
                </div>
              ))}
            </div>
          </li>
        ))}
      </ul>
    </>
  );
};
export default memo(AllType);
